<template>
	<div @click.stop="onClickHandler()" :class="[selected ?'m-row-selected-state ': 'm-row-normal-state ']" style="position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<van-tabs v-model:active="active">
			<van-tab title="工作流进度" name="steps">
				<van-steps direction="vertical" :active="2">
					<van-step>
						<h3>开始</h3>
						<p>2022-03-31 12:40</p>
						<p>2022-03-31 12:40</p>
					</van-step>
					<van-step>
						<h3>填写节点</h3>
						<p>2022-03-31 12:40</p>
						<p>2022-03-31 12:40</p>
					</van-step>
					<van-step>
						<h3>经理审批</h3>
						<p>2022-03-31 12:40</p>
						<p>2022-03-31 12:40</p>
					</van-step>
				</van-steps>
			</van-tab>
			<van-tab title="工作流意见" name="opinion">
				<van-steps direction="vertical" :active="0">
					<van-step>
						<h3>管理员</h3>
						<p>2022-03-31 12:40</p>
						<p>这是一个意见</p>
					</van-step>
				</van-steps>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignWorkflowStepsComponent",
		props: [
			"componentModel"
		],
		data() {
			return {
				active: "steps",
				selected: false,
				"propertySet": [{
					"key": "ID",
					"label": "ID",
					"editor": "label"
				}],
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.mobileComponentClickHandler(this);
			},
			setSelected(selected) {
				this.selected = selected;
			},
			getPropertyValue(propertyKey) {
				if(propertyKey=="ID"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
			}
		}
	}
</script>

<style>

</style>
